import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import orderService from "@/modules/individualOrdersManagement/order/order.service";
import {YoutubeOutlined,CommentOutlined,SearchOutlined} from "@ant-design/icons-vue";
import useNavigator from "@/hooks/useNavigator";
import Search from "./popup/search/search";
import Recording from "./popup/recording/recording";
import { Modal, Progress, Spin, message } from "ant-design-vue";
import useXlsx from "@/hooks/useXlsx";
import styles from "./orderListPage.module.less";
import {
  $orderlist,
} from "@/api/order/order";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const xlsx = useXlsx();
    const title = ref("" as any);
    const visible = ref(false);
    const state = reactive({
      toolbar: {
        left: ["refresh","output"],
        right: ["filter", "search"],
         output:{
          handler: async (e:any) => {
            title.value = "正在导出文件...";
            xlsx.init({
              limit: 2000,
              otherParams:{...e},
              service: $orderlist
            })
            await xlsx.defineList([
              {
                label: '系统保单号',
                value: 'order_no',
                width: 25,
              },
              {
                label: '续保/新保',
                value: ["is_new","label"],
                width: 25,
              },
              {
                label: '被保人姓名',
                value: 'insured_name',
                width: 25,
              },
              {
                label: '被保人证件号码',
                value: 'insured_id_no',
                width: 35,
              },
              {
                label: '投保人手机号',
                value: "applicant_mobile",
                width: 25,
              },
              {
                label: '保费',
                value: 'sum_premium',
                width: 25,
              },
              {
                label: '支付时间',
                value: 'pay_time',
                width: 25,
              },
              {
                label: '撤单时间',
                value: 'refund_time',
                width: 25,
              },
              {
                label: '状态',
                value: ["order_status","label"],
                width: 20,
              },
            ]);
            await xlsx.exportToExcel('个单列表.xlsx');
          }
        },
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "订单号",
          dataIndex: "order_no",
          align: "center",
          width: "200px",
        },
        {
          title: "产品名称",
          dataIndex: "product_name",
          align: "center",
          width: "200px",
        },
        {
          title: "投保人姓名",
          dataIndex: "applicant_name",
          align: "center",
          width: "100px",
        },
        {
          title: "被保人姓名",
          dataIndex: "insured_name",
          align: "center",
          width: "100px",
        },
        {
          title: "保费",
          dataIndex: "sum_premium",
          align: "center",
          width: "100px",
        },
        {
          title: "支付时间",
          dataIndex: "pay_time",
          align: "center",
          width: "180px",
        },
        {
          title: "撤单时间",
          dataIndex: "refund_time",
          align: "center",
          width: "180px",
        },
        {
          title: "订单状态",
          dataIndex:["order_status","label"],
          align: "center",
          width: "100px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      loading: false,
      searchForm: {
        applicant_name: {
          type: "input",
          label: "投保人姓名",
          attrs: { placeholder: "投保人姓名" },
        },
        applicant_id_no: {
          type: "input",
          label: "投保人证件号",
          attrs: { placeholder: "投保人证件号码" },
        },
        order_status: {
          type: "select",
          label: "订单状态",
          attrs: { placeholder: "订单状态" },
          datas: [
            {
              label: "待支付",
              value: 0,
            },
            {
              label: "已支付",
              value: 11,
            },
            {
              label: "已承保",
              value: 1,
            },
            {
              label: "已撤单",
              value: -11,
            },
            {
              label: "承保失败",
              value: -1,
            },
          ],
        },
      },
      pagination: {
        total: 1,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
      cityArray: [],
      marriageArray: [],
      politicsFaceArray: [],
      nationArray: [],
      id: "",
      btnLoading:false,
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    const $service = new orderService();
    const LTableRef = ref(null as any);
    const searchPopupRef = ref(null as any);
    const recordingRef = ref(null as any);
    return () => (
      <Page>
        <CardWithTitle title="个单列表">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                         <a-button
                            type="primary"
                            size="small"
                            v-slots={{
                              icon: () => <YoutubeOutlined />,
                            }}
                            onClick={() => {
                               if(state.btnLoading == false)
                               {
                                   state.btnLoading = true;
                                 recordingRef.value.open(record.order_no);
                               }
                            }}
                          >
                            回溯
                          </a-button>
                        {
                           record.order_status.label === "已支付" && (
                            <a-button
                            type="primary"
                            size="small"
                            v-slots={{
                              icon: () => <CommentOutlined />,
                            }}
                            onClick={() => {
                            }}
                          >
                            退保
                          </a-button>
                           )
                        }
                 
                      </div>
                    );
                  }
                  
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <Search 
          ref={searchPopupRef}
        />
           <Recording ref={recordingRef} 
        onCancel={()=>{
          state.btnLoading = false;
        }}
        />
         {
             <Modal
             title={title.value}
             visible={['doing'].includes(xlsx.state.running)}
             closable={false}
             footer={null}
           >
             <div class={styles["progress_box"]}>
               {
                 xlsx.state.running === "doing" && xlsx.progress.value < 100 && (
                   <Progress type="circle" percent={xlsx.progress.value} />
                 )
               }
               {
                 xlsx.state.running === "doing" && xlsx.progress.value === 100 && (
                   <Spin tip="正在导出文件,请勿关闭当前页面..." size="large" />
                 )
               }
             </div>
           </Modal>
            }
      </Page>
    );
  },
});